<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>任务分配系统</title>

    <!-- Bootstrap Core CSS -->
    {% load static %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>

<!-- Bootstrap 3.4.1 版本（SB Admin 2兼容版本）-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

<!-- metisMenu 2.7.9 版本 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.9/metisMenu.min.css" rel="stylesheet">

<!-- 该文件没有公共CDN，保持原静态文件 -->
<link href="{% static 'dist/css/sb-admin-2.css' %}" rel="stylesheet">

<style>
    /* 添加自定义样式确保iframe填满剩余空间 */
    .full-height-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    .iframe-container {
        position: relative;
        width: 100%;
        height: calc(100vh - 100px); /* 根据导航栏高度调整 */
        overflow: hidden;
    }
</style>

</head>

<body>
<div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/fine-se">
                <strong>
                    <i style="font-size: 36px; margin-left: 30px;">
                        <font color="black">Fine</font>
                        <font color="black"> - </font>
                        <font color="#00B0F0">SE</font>
                    </i>
                </strong>
            </a>
        </div>

        <ul class="nav navbar-top-links navbar-right">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-tasks">
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>项目1</strong>
                                    <span class="pull-right text-muted">已完成40%</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>项目2</strong>
                                    <span class="pull-right text-muted">已完成20%</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                        <span class="sr-only">20% Complete</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>项目3</strong>
                                    <span class="pull-right text-muted">已完成60%</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                        <span class="sr-only">60% Complete (warning)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>项目4</strong>
                                    <span class="pull-right text-muted">已完成80%</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                        <span class="sr-only">80% Complete (danger)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="#">
                            <strong>查看所有项目</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size: 16px; ">
                    <i class="fa fa-user fa-fw"></i> {{ user_full_name }}  <!-- 修改这里显示full_name --> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#"><i class="fa fa-user fa-fw"></i> 用户信息</a></li>
                    <li><a href="#"><i class="fa fa-gear fa-fw"></i> 设置</a></li>
                    <li class="divider"></li>
                    <li><a href="/logout"><i class="fa fa-sign-out fa-fw"></i> 退出登录</a></li>
                </ul>
            </li>
        </ul>

        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="搜索...">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                        </div>
                    </li>
                    <li>
                        <a href="/manager"><i class="fa fa-user fa-fw"></i> 个人主页</a>
                    </li>
                    <li class="active">
                        <a href="#" data-toggle="collapse" data-target="#fine-se-menu" aria-expanded="false"
                           class="dropdown-toggle">
                            <i class="fa fa-wrench fa-fw"></i> 使用Fine-SE<i class="fa fa-angle-down pull-right"></i>
                        </a>
                        <ul class="nav nav-second-level collapse in" id="fine-se-menu" aria-expanded="true" style="">
                            <li class="active">
                                <a href="/train">
                                    <i class="fa fa-graduation-cap fa-fw"></i>模型训练
                                </a>
                            </li>
                            <li>
                                <a href="/predict">
                                    <i class="fa fa-calculator fa-fw"></i> 工作量评估
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="/assign" style="background-color: #e6f2ff;"><i class="fa fa-tasks fa-fw"></i> 分配任务</a>
                    </li>
                    <li>
                        <a href="/monitorframe"><i class="fa fa-chart-line fa-fw"></i> 监控任务</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">分配任务</h1>
            </div>
        </div>
        <!-- 添加iframe容器 -->
        <div class="row">
            <div class="col-lg-12">
                <div class="iframe-container">
                    <iframe src="/assigncontent" class="full-height-iframe"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/vendor/jquery/jquery.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/vendor/metisMenu/metisMenu.min.js"></script>
<script src="/static/vendor/raphael/raphael.min.js"></script>
<script src="/static/vendor/morrisjs/morris.min.js"></script>
<script src="/static/data/morris-data.js"></script>
<script src="/static/dist/js/sb-admin-2.js"></script>

<script>
    // 动态调整iframe高度
    $(document).ready(function() {
        function adjustIframeHeight() {
            var navbarHeight = $('.navbar-static-top').outerHeight() || 50;
            var pageHeaderHeight = $('.page-header').outerHeight() || 50;
            var newHeight = $(window).height() - navbarHeight - pageHeaderHeight - 30;
            $('.iframe-container').height(newHeight);
        }

        // 初始调整
        adjustIframeHeight();

        // 窗口大小改变时调整
        $(window).resize(adjustIframeHeight);
    });
</script>

</body>
</html>